<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <com-a @abc="fun_a"></com-a>
    <com-b :content="parent_content"></com-b>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('com-a', {
        data() {
            return {
                content: '我是组件com-a中的变量'
            }
        },
        methods: {
            fun_a() {
                this.$emit('abc', this.content)
            }
        },
        template: `
          <div>
            <h2>组件com-a</h2>
            <button @click="fun_a">点我</button>
          </div>
        `
    })

    Vue.component('com-b',{
        props:['content'],
        template:`
          <div>
            <h2>组件com-b</h2>
            {{ content }}
          </div>
        `
    })


    new Vue({
        el: '#app',
        data() {
            return {
                parent_content: ''
            }
        },
        methods: {
            fun_a(con) {
                this.parent_content = con
            }
        }
    })
</script>